<template>
    <div class="insert">
      <el-form label-width="auto" class="text">
        <!-- <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="咨询师名称" style="margin-top: 30px 0" >
          <el-input v-model="zixunshiName" placeholder="请输入咨询师名称"/>
        </el-form-item>
        
        <el-form-item label="咨询师性别" style="margin-top: 30px 0">
          <el-input placeholder="请输入性别 男/女" v-model="zixunshiSex"/>
        </el-form-item>
            
        <el-form-item label="等级名" style="margin-top: 30px 0">
          <el-input placeholder="请输入等级名数字,1是1级，2是2级..." v-model="zixunshiGid"/>
        </el-form-item>
        <!-- <el-form-item label="所属领域" style="margin-top: 30px 0">
          <el-input placeholder="请输入所属领域" v-model="adept"/>
        </el-form-item> -->
        <el-form-item label="地址" style="margin-top: 30px 0">
          <el-input placeholder="请输入地址XX省XX市" v-model="zixunshiAddress"/>
        </el-form-item>
        <el-form-item label="咨询师简介" style="margin-top: 30px 0">
          <el-input type="textarea" v-model="zixunshiIntroduce"/>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script  setup>
  import { ref } from 'vue'
  import { defineEmits,watch } from 'vue'
  // import { ElMessage } from 'element-plus'
  // import { Plus } from '@element-plus/icons-vue'

  
  const zixunshiName=ref('');
  const zixunshiSex=ref('');
  const zixunshiGid=ref('');
  // const adept=ref('');
  const zixunshiAddress=ref('');
  const zixunshiIntroduce=ref('');
  
  // const handleAvatarSuccess= (res, file) => {
  //   imageUrl.value = URL.createObjectURL(file.raw)
  // }
  
  // const beforeAvatarUpload=(rawFile) => {
  //   if (rawFile.type !== 'image/jpeg') {
  //     ElMessage.error('图片必须为jpg格式')
  //     return false
  //   } else if (rawFile.size / 1024 / 1024 > 2) {
  //     ElMessage.error('图片大小不能超过2MB')
  //     return false
  //   }
  //   return true
  // }

  const emits=defineEmits(['zixunshiData']);
  watch([zixunshiName, zixunshiSex, zixunshiGid, zixunshiAddress, zixunshiIntroduce], () => {
    emits('zixunshiData', {
      zixunshiName: zixunshiName.value,
      zixunshiGid: zixunshiGid.value,
      zixunshiSex: zixunshiSex.value,
      // adept: adept.value,
      zixunshiAddress: zixunshiAddress.value,
      zixunshiIntroduce: zixunshiIntroduce.value,
    });
    console.log("数据发送成功");
    
  }, { immediate: true });

  </script>
  
  
  <style lang="less" scoped>
      .avatar-uploader .avatar {
      width: 178px;
      height: 178px;
      display: block;
      }
      
      .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
      }
  
      .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
      }
  
      .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
      }
  
      .insert {
  
          padding: 30px 10px;
  
          .text {
  
              font-weight: 700;
  
              .def {
                   font-weight: 100;
              }  
  
              /deep/ .el-select__wrapper {
                  min-height: 35px;
              }
  
              .sel {
                  width: 210px;
              }
          }   
      }
  </style>